<template>
  <div class="editor-container">
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <el-form-item label="所属模块" prop="module">
        <el-select v-model="form.module" @change="selectChanged">
          <el-option label="产品使命" value="3"></el-option>
          <el-option label="产品价值" value="4"></el-option>
          <el-option label="产品愿景" value="5"></el-option>
          <el-option label="愿望池" value="2"></el-option>
          <el-option label="招募令" value="6"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="图片">
        <el-upload
          :file-list="fileList"
          action="imageUrl"
          list-type="picture-card"
          :before-upload="imageUrlBeforeUpload"
          :on-remove="removeFile"
          name="file"
          :http-request="uploadImage"
          multiple
          :limit="1"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="项目描述" prop="content">
        <el-input
          v-model.trim="form.content"
          type="textarea"
          placeholder="请输入项目描述"
        ></el-input>
      </el-form-item>
      <el-form-item class="btn">
        <el-button type="primary" @click="save">确 定</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import _net from '../../config/net.config'
  import { setInfo, getInfo } from '@/api/info'
  import { upload } from '@/api/upload'

  export default {
    name: 'Editor',
    data() {
      return {
        showImg: false,
        image: '',
        dialogTableVisible: false,
        fileList: [],
        form: {
          module: '',
          content: '',
        },
        rules: {
          module: [
            {
              required: true,
              message: '请选择模块',
              trigger: 'change',
            },
          ],
          content: [
            {
              required: true,
              message: '请输入内容',
              trigger: 'blur',
            },
          ],
        },
      }
    },
    methods: {
      async selectChanged(value) {
        console.log('selected:' + value)
        const { data } = await getInfo()
        if (data.status == 0) {
          let result = data.body
          console.log(result)
          let pix = {}
          switch (Number(value)) {
            case 3:
              pix = JSON.parse(result.productMission)
              break
            case 4:
              pix = JSON.parse(result.values)
              break
            case 5:
              pix = JSON.parse(result.vision)
              break
            case 2:
              pix = JSON.parse(result.wish)
              break
            case 6:
              pix = JSON.parse(result.want)
              break
          }
          console.log(pix)
          // let base = 'https://note.zjut.club'
          let base = _net.baseURL
          let element = base + '/file/download?fileId=' + pix.pixId
          this.fileList = [{ url: element, id: pix.pixId }]
          this.form.content = pix.text
        } else {
          this.$baseMessage(data.message, 'error')
        }
      },
      removeFile(file, fileList) {
        console.log(file)
        console.log(fileList)
        let _temp = this.fileList.filter(function (item) {
          return item.id != file.id
        })
        this.fileList = _temp
      },
      async uploadImage(param) {
        console.log(param)
        const formData = new FormData()
        formData.append('fileType', 1)
        formData.append('file', param.file)
        console.log(formData)
        const { data } = await upload(formData)
        if (data.status == 0) {
          // let base = 'https://note.zjut.club'
          let base = _net.baseURL
          const element = base + '/file/download?fileId=' + data.body.fileId
          this.fileList.push({ url: element, id: data.body.fileId })
        } else {
          this.$baseMessage(data.message, 'error')
        }
        console.log(this.fileList)
      },
      imageUrlBeforeUpload(file) {
        let isRightSize = file.size / 1024 / 1024 < 2
        if (!isRightSize) {
          this.$message.error('文件大小超过 2MB')
        }
        return isRightSize
      },
      save() {
        this.$refs['form'].validate(async (valid) => {
          if (valid) {
            if (this.fileList.length == 0) {
              this.$baseMessage('上传的图片不能为空', 'error')
              return
            }
            let formatData = {}

            const condition = this.form.module
            formatData.baseId = '1'
            let element = {}
            element.pixId = this.fileList[0].id
            element.text = this.form.content
            let _json = JSON.stringify(element)
            if (condition == '2') {
              formatData.wish = _json
            } else if (condition == '6') {
              formatData.want = _json
            } else if (condition == '3') {
              formatData.productMission = _json
            } else if (condition == '4') {
              formatData.values = _json
            } else if (condition == '5') {
              formatData.vision = _json
            }
            //设置使命，价值观 愿景等
            const { data } = await setInfo(formatData)
            if (data.status == 0) {
              this.$baseMessage('更新成功!', 'success')
            } else {
              this.$baseMessage(data.message, 'error')
            }
          }
        })
      },
    },
  }
</script>
<style lang="scss" scoped>
  .btn {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
</style>
